<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form class="serach-form" :inline="true" :model="formInline" @submit.native.prevent>
        <!-- <el-form-item>
          <el-input v-model.trim="formInline.name" placeholder="请输入点位类别名称" @keyup.enter.native="getList(1)" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
        </el-form-item>-->
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="addPointType()">新增</el-button>
      </div>
    </el-row>
    <el-row class="overview-wrap" :gutter="0" type="flex" justify="center">
      <el-col :span="24">
        <div class="item-wrap">
          <p class="item-value color-4">{{ formInline.currentPageTotal }}</p>
          <p class="item-title">类别总数</p>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" ref="mainTable" style="width: 100%">
      <el-table-column prop="pointTypeName" label="类别名称" align="center"></el-table-column>
      <el-table-column prop="createAccountName" label="创建人" align="center"></el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="showDetailDialog(scope.row)" type="text" size="small">详情</el-button>
          <span class="dividing-line">|</span>
          <el-button @click="addPointType(scope.row)" type="text" size="small">编辑</el-button>
          <span class="dividing-line">|</span>
          <el-button @click="delPointType(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal"
    ></el-pagination>

    <!-- 增加对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      width="800px"
      top="10vh"
      :title="(editInfo.id?'编辑':'新增')+'点位类别'"
      v-if="dialogVisible.edit"
      :visible.sync="dialogVisible.edit"
      @close="handleClose"
      v-dialogDrag
    >
      <point-type-edit :handleClose="handleClose" :editInfo="editInfo"></point-type-edit>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      width="600px"
      top="10vh"
      :title="detailDialogTitle"
      v-if="detailDialog"
      :visible.sync="detailDialog"
      v-dialogDrag
    >
      <point-type-detail :dataInfo="editInfo"></point-type-detail>
    </el-dialog>
  </div>
</template>

<script>
import PointTypeEdit from './Dialog/PointTypeEdit'
import PointTypeDetail from './Dialog/PointTypeDetail'

import util from '@/utils/util'

import { getOrgList } from '@/api/org'

// 接口
import {
  getInspectPointTypeList,
  getPointTypeInfo,
  delInspectPointType,
  judgePointUsed,
} from '@/api/inspectx'

export default {
  name: 'PointType',
  props: ['param'],
  components: {
    PointTypeEdit,
    PointTypeDetail,
  },
  data() {
    return {
      dialogVisible: {
        edit: false,
        detail: false,
      },
      formInline: {
        name: '', // 点位类别名
        result: '-1', // 不知道什么的结果
        orgIds: this.$store.state.userinfo.isMuilUnitUser
          ? this.$store.state.userinfo.organizationIds
          : this.$store.state.userinfo.org.id, // organizationIds / org.id
        currentPageSize: 10, // 当前页面大小
        currentPageIndex: 1, // 当前页面下标
        currentPageTotal: 0, // 类别总数
      },
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser, // 多单元用户   ？
      accountName: this.$store.state.userinfo.accountName, // 账户名
      defaultImg: this.GLOBAL.defaultImg, // 默认图片
      tableData: [], // 表格数据
      orgOptions: [
        // 组织选项
        {
          organizationId: this.$store.state.userinfo.organizationIds,
          shortName: '全部业主单位',
        },
      ],
      loading: false, // 加载标志

      addPointTypeDialog: false, // 增加点位类别对话框

      detailDialog: false, // 详情对话框标志
      contents: [], // 详情对话框数据来源
      detailDialogTitle: '', // 详情对话框类别名称标题

      isAddPointType: true, // 判断是否是新增还是编辑对话框

      editTitle: '', // 编辑对话框的标题

      editPointType: {}, // 编辑时获取的点位类别信息

      editInfo: {
        // 编辑对应的表单信息
        /*id:0,
        orgId:'',
        pointTypeName : '', 
        picUrl:'',
        createAccount:this.$store.state.userinfo.accountName,
        updateAccount:this.$store.state.userinfo.accountName,
        contents:'',*/
      },
    }
  },
  created: function () {
    this.getList() //获取点位类别内容
    getOrgList({ queryType: 0 }).then((data) => {
      // 获取业主单位列表
      this.orgOptions.push.apply(this.orgOptions, data.data)
    })
  },
  methods: {
    // 查看详情
    showDetailDialog(row) {
      this.editInfo = row
      this.detailDialogTitle = row.pointTypeName
      this.detailDialog = true
    },
    sizeChange(val) {
      // 页码切换
      this.formInline.currentPageIndex = 1
      this.formInline.currentPageSize = val
      this.getList()
      console.log(val)
    },
    pageChange(val) {
      // 翻页
      this.formInline.currentPageIndex = val
      this.getList()
      console.log(val)
    },
    getData(_pageIndex) {
      // 目前不知道做什么用的
      this.getList(_pageIndex)
    },
    getList(_pageIndex) {
      // 获取列表
      if (_pageIndex) {
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading = true // 开启loading加载
      getInspectPointTypeList({
        // 获取点位类别数据
        queryType: 1,
        pageIndex: this.formInline.currentPageIndex - 1, // 当前页面数
        pageSize: this.formInline.currentPageSize, // 当页面的页码数
      }).then((result) => {
        this.formInline.currentPageTotal = result.total // 设置当前总列表数
        this.tableData = result.data // 设置当前页面表格数据
        this.loading = false // 关闭loading加载
      })
    },

    addPointType(row) {
      this.dialogVisible.edit = true
      this.editInfo = row || {}
    },

    handleClose(refresh) {
      this.dialogVisible.edit = false
      if (refresh) {
        this.getList(1)
      }
    },

    delPointType(row) {
      // 删除类别

      judgePointUsed({ pointTypeId: row.id }).then((res) => {
        if (!res.total) {
          // 未被使用
          this.$confirm('是否删除该点位类别？', '删除提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              delInspectPointType({ pointTypeId: row.id }).then((res) => {
                if (res.status === 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success',
                  })
                  this.getList()
                }
              })
            })
            .catch(() => {})
        } else {
          this.$alert(
            '请先删除包含该类别的点位，我们建议你尽量保留类别。',
            '提示',
            {
              confirmButtonText: '去查看巡检点位',
            }
          )
            .then((action) => {
              this.$router.push('/InspectPoint')
            })
            .catch(() => {})
        }
      })
    },
  },
}
</script>

<style lang="scss">
// .el-dialog {
//   padding-bottom: 20px;
// }
</style>